<!--
 * @Description: 余料信息
-->
<template>
    <el-dialog v-dialogDrag :visible="visible" title="物流异常" width="400px" @close="onClose" @open="onOpen">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="abnormalDialog_form">
            <el-form-item label="异常类型：" prop="type">
                <el-select v-model="form.type" placeholder="请选择">
                    <el-option label="站外异常" value="1"></el-option>
                    <el-option label="站内异常" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="异常量：" prop="abnormalNum">
                <el-input v-model="form.abnormalNum" placeholder="请输入异常量" />
            </el-form-item>
            <el-form-item label="异常备注：">
                <el-input v-model="form.remark" placeholder="备注" type="textarea" :rows="2" />
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button class="bottom_all_two" @click="onClose">取 消</el-button>
            <el-button class="bottom_all" type="primary" @click="onConfirm">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import { logisticsAbnormal, queryAbnormal } from "@/api/smart/schedul/k.js";
    export default {
        data() {
            return {
                form: {
                    logisticsId: '', // 物流ID
                    type: '1', // 异常类型
                    abnormalNum: '', // 异常量：默认票面量
                    remark: '', // 备注
                },
                rules: {
                    type: [{required: true, message: '请选择异常类型'}],
                    abnormalNum: [{required: true, message: '请输入异常量'}],
                }
            };
        },
        props: {
            config: {
                type: Object,
                default: () => ({}),
            },
            visible: {
                type: Boolean,
            },
        },
        methods: {
            onOpen() {
                queryAbnormal({logisticsId: this.config.id}).then(res=>{
                    if(res.code === 1001 && res.data) {
                        this.form.logisticsId = res.data.logisticsId;
                        this.form.type = String(res.data.type);
                        this.form.abnormalNum = res.data.abnormalNum;
                        this.form.remark = res.data.remark;
                    } else {
                        this.form.logisticsId = this.config.id;
                        this.form.type = '1';
                        this.form.abnormalNum = this.config.faceValue;
                    }
                })
            },
            onClose() {
                this.$emit("update:visible", false)
            },
            async onConfirm() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        logisticsAbnormal(this.form).then(res=>{
                            if(res.code === 1001) {
                                this.$message.success("处理成功")
                                this.$emit("updated", false)
                                this.$emit("update:visible", false)
                                this.$refs['form'].resetFields();
                            }
                        })
                    } 
                });
            },
        },
    };
</script>
<style lang="scss">
.abnormalDialog_form {
    .el-textarea, .el-input__inner {
        width: 215px;
    }
}
</style>